<template>
  <el-dialog
    v-model="dialogVisible"
    title="考试提交列表"
    width="70%"
    :before-close="handleClose"
    class="submission-dialog"
  >
    <el-table
      :data="submissions"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      border
      stripe>
      <el-table-column prop="student_id" label="学号" width="180"></el-table-column>
      <el-table-column prop="student_name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="total_score" label="成绩" width="180">
        <template #default="{ row }">
          <span>{{ row.total_score !== null ? row.total_score : '未评分' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="operation-buttons">
            <el-button
              type="primary"
              size="small"
              @click="handleUploadScan(row)"
              :disabled="row.status === 'GRADED'"
            >
              上传扫描件
            </el-button>
            <el-button
              type="success"
              size="small"
              @click="handleGrade(row)"
              :disabled="row.status === 'GRADED' || row.total_score !== null"
            >
              评分
            </el-button>
            <el-button
              type="warning"
              size="small"
              @click="handleAIProcess(row)"
              :disabled="row.status === 'NOT_SUBMITTED'"
            >
              智能处理
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- AI处理对话框 -->
  <AIProcessingDialog
    v-if="selectedSubmission"
    v-model:visible="aiDialogVisible"
    :submission="selectedSubmission"
    @processed="handleAIProcessed"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import AIProcessingDialog from './AIProcessingDialog.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  submissions: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'close', 'upload-scan', 'grade', 'view'])

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// AI处理相关状态
const aiDialogVisible = ref(false)
const selectedSubmission = ref(null)

const getStatusType = (status) => {
  const types = {
    'SUBMITTED': 'success',    // 已提交扫描件
    'NOT_SUBMITTED': 'warning',// 未提交扫描件
    'GRADED': 'info'          // 已评分
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    'SUBMITTED': '已提交',
    'NOT_SUBMITTED': '未提交',
    'PROCESSING': '处理中',
    'GRADED': '已评分'
  }
  return texts[status] || '未知状态'
}

const handleClose = () => {
  emit('close')
}

const handleUploadScan = (submission) => {
  emit('upload-scan', submission)
}

const handleGrade = (submission) => {
  emit('grade', submission)
}

const handleViewSubmission = (submission) => {
  emit('view', submission)
}

// AI处理相关方法
const handleAIProcess = (submission) => {
  selectedSubmission.value = submission
  aiDialogVisible.value = true
}

const handleAIProcessed = () => {
  // 可能需要刷新提交列表
  emit('close')
  emit('update:visible', true)
}
</script>

<style scoped>
.submission-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

/* 添加一些过渡动画 */
.operation-buttons .el-button {
  transition: all 0.3s ease;
}

.operation-buttons .el-button:hover {
  transform: translateY(-2px);
}

/* 禁用状态样式 */
.operation-buttons .el-button.is-disabled {
  opacity: 0.6;
  transform: none;
}
</style>